<template>
	<nav-header v-if="!isEdit" title="友星缘科技有限公司">
		<template v-slot:right>
			<view class="nav-edit">
				<!-- <button  type="primary"  size="small" @click="edit">编辑</button> -->
				<text class="edit" @click="edit">编辑</text>
			</view>
		</template>
	</nav-header>

	<nav-header v-else title="修改简介">
		<template v-slot:left>
			<view @tap.stop="isEdit = false">
				<svg-icon icon="arrowLeft"></svg-icon>
			</view>
		</template>
	</nav-header>

	<view class="container">
		<view class="content">
			<text v-if="isEdit" class="company-intro-text text-sm-Regular">公司简介:</text>
			<!-- <view v-if="!isEdit">{{value}}</view> -->
			<view class="content1" v-if="!isEdit">
				<view class="top">
					<text class="text-sm-Regular">公司简介：</text>
					<view class="top-right" @tap.stop="edit">
						<text class="text-sm-Regular">去编辑</text>
						<svg-icon icon="arrowRight" :width="32"></svg-icon>
					</view>
				</view>
				<view class="bottom">
					<text class="text-sm-Regular">
						{{ value }}
					</text>
				</view>
			</view>
			<view v-else style="padding-top: 20rpx;">
				<up-textarea v-model="value" placeholder="请输入内容" height="100" count :maxlength="maxlength">
				</up-textarea>
			</view>
		</view>
		<!-- <view class="footer" v-if="isEdit">
			<view>
				<up-button type="primary" @click="submit" text="确认"></up-button>
			</view>
		</view> -->
		<view v-if="isEdit">
			<tabbar-button-group text="确认" @click="submit"></tabbar-button-group>
		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				value: '测试文字编辑',
				maxlength: 300,
				isEdit: false
			};
		},
		methods: {
			edit() {
				this.isEdit = true

			},
			submit() {
				this.isEdit = false

			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		// margin-left: 20rpx;
		// margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		height: 90vh;
		/* 使容器高度占满整个视口高度 */
	}

	.edit {
		color: $brand-500;
	}

	.content1 {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin-top: 16rpx;
		// padding: 24rpx 32rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: $gray-400;

			.top-right {
				display: flex;
				align-items: center;
				gap: 8rpx;
				color: $brand-500;
			}
		}

		.bottom {
			color: $gray-600;
		}
	}

	.content {
		flex: 1;
		/* 使内容区域占满剩余空间 */
		overflow-y: auto;
		/* 如果内容过多，则出现滚动条 */
		padding: 24rpx 32rpx;
		/* 添加一些内边距使内容不贴边 */
	}


	.footer {
		padding: 16px;
		/* 添加内边距 */
		text-align: center;
		/* 文本居中 */
		border-top: 1px solid #ddd;
		/* 添加顶部边框 */
	}
</style>